<template>
  <div class="area">
    <div class="erea-box">
      <transition
        v-on:before-enter="beforeEnter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <div class="area-bus" v-show="showAction">
          <div class="area-bus-title">
            <img src="../assets/bus.png" alt="" />
            <p>巴士时刻表</p>
          </div>
          <div class="project">
            <p class="project-type">线路</p>
            <p class="project-time">运营时间</p>
            <p class="project-interval">发车间隔</p>
          </div>
          <vue-seamless-scroll
            :data="tableData"
            :class-option="classOption"
            ref="seamlessScroll"
            class="seamless-warp"
          >
            <div
            class="copy-project"
            v-for="(item, index) in tableData"
            :key="index"
          >
            <p class="project-type">{{ item.line }}</p>
            <p class="project-time">{{ item.date }}</p>
            <p class="project-interval">{{ item.time }}</p>
          </div>
          </vue-seamless-scroll>
          
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
import { getPieEchart, coordinateSystem } from "../tools/echarts";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  data() {
    return {
      classOption: {
        direction: 0,
        singleHeight: 26
      },
      tableData: [
        {
          line: "方庄 - 北京大兴国际机场",
          date: "5:10-21:10",
          time: "20分钟",
        },
        {
          line: "方庄 - 北京大兴国际机场",
          date: "5:10-21:10",
          time: "20分钟",
        },
        {
          line: "方庄 - 北京大兴国际机场",
          date: "5:10-21:10",
          time: "20分钟",
        },
        {
          line: "方庄 - 北京大兴国际机场",
          date: "5:10-21:10",
          time: "20分钟",
        },
        {
          line: "方庄 - 北京大兴国际机场",
          date: "5:10-21:10",
          time: "20分钟",
        },
      ],
      time: null,
    };
  },
  components: {
    vueSeamlessScroll
  },
  mounted() {
    setTimeout(() => {
      this.$refs.seamlessScroll.reset()
    }, 1000);
  },
};
</script>
<style lang="scss" scoped>
.area {
  display: flex;
  align-items: center;
}
.area-bus {
  background: #000006;
  border: 1px solid #bdbdbf;
  width: 350px;
  border-radius: 16px;
  padding: 10px 18px;
}
.area-bus-title {
  display: flex;
  align-items: center;
}
.area-bus-title p {
  font-size: 16px;
  color: white;
  font-family: ShiShangZhongHeiJianTi;
  padding-left: 8px;
}
.project {
  width: 314px;
  border-bottom: 2px solid #5b5e65;
  display: flex;
}
.project p {
  font-size: 14px;
  font-family: ShiShangZhongHeiJianTi;
  font-weight: 400;
  padding: 8px 0;
  color: #545a61;
}
.project-type {
  width: 50%;
}
.project-time {
  width: 30%;
}
.project-interval {
  width: 20%;
}
.seamless-warp {
  height: 127px;
  overflow: hidden;
}
.copy-project {
  display: flex;
}
.copy-project p {
  font-size: 12px;
  font-family: ShiShangZhongHeiJianTi;
  font-weight: 400;
  color: #abb2b9;
  padding-top: 14px;
}
</style>
